let uu1 = document.querySelector('#cityList ul')
// let uu2 = document.querySelector('#cityList .last')
let dd = document.querySelector('#cityNav')
$('.name1').prop('shopid',0)
$('.name2').prop('areaid',0)
$('#cityNav ul li').prop('flag', false)
let flag
$(dd).on('click', 'ul li', function () {
    flag = $(this).prop('flag')
    if (!flag) {
        $('.first').show();
        $(this).prop('flag', true)
        $(this).find('span').eq(1).text('▲')
    } else {
        $('.first').hide();
        $(this).prop('flag', false)
        $(this).find('span').eq(1).text('▼')
    }
    console.log(this)
    let name = $(this).attr('class')
    console.log(name)
    if (name === 'drop1') {
        console.log('1')
        fetch('http://chst.vip:1234/api/getgsshop')
            .then(body => body.json())
            .then(res => {
                console.log(res)
                let el = ""
                res.result.forEach(item => {
                    el += `<li shopid=${item.shopId} shopname=${item.shopName}>
                ${item.shopName}</li>
            `
                });
                uu1.innerHTML = el
              
                
            })
    } else if (name === 'drop2') {
        fetch('http://chst.vip:1234/api/getgsshoparea')
            .then(body => body.json())
            .then(res => {
                console.log(res)
                let ll = ""
                res.result.forEach(item => {
                    ll += `<li areaid=${item.areaId} areaname= ${item.areaName}>
            ${item.areaName}</li>
        `
                });
                uu1.innerHTML = ll
            })
    }

    $(uu1).on('click', 'li', function () {
        $('#cityList ul').hide()
        console.log('yy')
        let name1 = $(this).attr('shopname')
        let name2 = $(this).attr('areaname')
        if (name == 'drop1') {
            $(this).parent().parent().prev().find('ul').find('li.drop1').find('.name1').text(name1)
            console.log($(this))
            let sid=$(this).attr('shopid')
            console.log(sid)
            $('.name1').prop('shopid',sid)
            console.log( $('.name1').prop('shopid'))
            // let shopid=$('.name1').prop('shopid');
            // let areaid=$('.name2').prop('areaid')

        } else {
            $(this).parent().parent().prev().find('ul').find('li.drop2').find('.name2').text(name2)
            console.log($(this))
            let aid=$(this).attr('areaid')
            console.log(aid)
            $('.name2').prop('areaid',aid)
            console.log( $('.name2').prop('areaid'))
        }
        let shopid=$('.name1').prop('shopid');
        let areaid=$('.name2').prop('areaid');
        console.log(shopid)
        console.log(areaid)
        fetch('http://chst.vip:1234/api/getgsproduct?shopid='+shopid+'&areaid='+areaid)
        .then(body => body.json())
        .then(res => {
            let xin = ""
            res.result.forEach(item => {
                xin += `<li>
                    <a><img src=${item.productImg}>
                    <p>${item.productName}</p>
                    <span>${item.productPrice}</span></a>
                    </li>
            `
            })
            da.innerHTML = xin
        })
    })
})
let da = document.querySelector('#data ul')
window.onload = function () {
    fetch('http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0')
        .then(body => body.json())
        .then(res => {
            let xin = ""
            res.result.forEach(item => {
                xin += `<li>
                    <a><img src=${item.productImg}>
                    <p>${item.productName}</p>
                    <span>${item.productPrice}</span></a>
                    </li>
            `
            })
            da.innerHTML = xin
        })
}

// fetch('http://chst.vip:1234/api/getgsproduct')





